 /*
 * @description: 岗位列表
 * @Author: along
 * @Date: 2021-07-09
 * @Last Modified by: along
 * @Last Modified time: 2021-07-09
 */
<template>
    <div class="container companyPostList">
        <div class="__nav">
            <p class="__nav_title">
                岗位列表
            </p>
        </div>
        <!-- header -->
        <div class="header-nav">
            <div class="__info">
                <p class="__info_title">岗位信息</p>
                <el-input
                    v-model="keyword"
                    placeholder="请输入岗位名称"
                    size="small"
                    clearable
                    suffix-icon="el-icon-search"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                    :style="{width: '406px'}"
                />
            </div>
            <el-button
                size="medium"
                type="primary"
                :style="{width: '128px'}"
                @click="handleCheckDetail({}, 'create')"
            >
                新增岗位
            </el-button>
        </div>
        <!-- /header -->

        <!-- table -->
        <div class="__wrap">
            <el-table
                :data="tableData"
                height="100%"
                style="width: 100%;"
                border
                ref="companyPostList"
            >
                <el-table-column
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                />
                <el-table-column
                    prop="name"
                    label="岗位名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                />
                <!-- <el-table-column
                    prop=""
                    label="所属部门"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                /> -->
                <el-table-column
                    label="操作"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            class="curse-add"
                            @click="handleCheckDetail(scope.row, 'edit')"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="text"
                            class="curse-add"
                            @click="handleDelete(scope.row)"
                            :style="{color: 'rgba(249, 91, 86, 1)'}"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- /table -->

            <!-- /分页 -->
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    background
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>

        <!-- 岗位弹窗 -->
        <create-platform-control
            ref="createcompanyPostList"
            @confirm="conformData"
        />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import createPlatformControl from '@/components/manage/create-platform-control.vue';
export default {
    mixins: [back],
    components: {
        createPlatformControl
    },
    data () {
        return {
            position_no: '',
            keyword: '',//岗位信息
            showDialog: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [{}],
            authResult: {}
        };
    },
    filters: {},
    computed: {},
    watch: {},
    mounted () {
        this.$store.commit('SET_HEADER', [{title: '设置'},{title: '员工管理'},{title: '岗位列表'}]);
        this.authResult = this.$route.meta.authResult;
        this.getTableData();
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/__local/system%5Cdepartment_position%5Cget_list', {
                page_id: page || this.page.now_page,
                keyword: this.keyword
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 创建/编辑 岗位
         * @param {String}  no     //编号 为空时是创建
         * @param {String}  type    //edit:编辑 creat：创建
         */
        handleCheckDetail (row = {}, type) {
            this.position_no = row.position_no;
            this.$refs.createcompanyPostList.showDialog(row, type);
        },

        /**
         * @description 删除
         */
        handleDelete (row) {
            this.$confirm('此操作将删除该岗位, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/__local/system%5Cdepartment_position%5Cdelete',{
                    position_no: row.position_no
                },resp=>{
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            message: '删除成功',
                            type: 'success',
                            duration: 2000
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            });
        },

        /**
         * @description 新增编辑数据
         * @row
         *     type: edit:编辑 create：创建
         *     list: 新增时使用
         *     row：编辑时使用
         */
        conformData (row) {
            console.log('row', row);

            if(row.type == 'create') {
                for(let i=0; i<row.list.length;i++) {
                    this.$post('/__local/system%5Cdepartment_position%5Cadd',{
                        department_no: row.list[i]['department'],
                        name: row.list[i]['post_name']
                    },resp=>{
                        //
                    });
                }

                setTimeout(() => {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                }, 600);
            }

            if(row.type == 'edit') {
                this.$post('/__local/system%5Cdepartment_position%5Cset',{
                    position_no: this.position_no,
                    name: row.row.post_name
                },resp=>{
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            message: '更新成功',
                            type: 'success',
                            duration: 2000
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            }
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    // width: 100%;
    // height: 100%;
    margin: 12px;
    overflow: hidden;
    .__nav {
        width: 100%;
        height: 67px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 35px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        margin-bottom: 24px;
        .__nav_title {
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                left: -8px;
                top: -1px;
                width: 3px;
                height: 20px;
                background: rgba(24, 144, 255, 1);
            }
        }
    }
    .header-nav {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        box-sizing: border-box;
        padding: 0 32px;
        .__left_button {
            flex: 1;
            height: 36px;
            background: rgba(32, 160, 255, 0.1);
            border-radius: 4px;
            border: 1px solid #20A0FF;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            font-weight: 500;
            .el-icon-hand-iconjia {
                color: rgba(32, 160, 255, 1);
                margin-right: 10px;
                font-size: 14px;
                font-weight: 500;
            }
        }
        .__info {
            display: flex;
            align-items: center;
            .__info_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                margin-right: 12px;
            }
        }
    }

    .__wrap {
        width: calc(100% - 64px);
        margin-left: 32px;
        margin-bottom: 12px;
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    /* 表单 */
    .scope-price {
        width: 50px;
        height: 50px;
    }
    /* 字体高亮 */
    .cursor-font {
        color: rgb(64, 158, 255);
        cursor: pointer;
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
/* 排序 */
.sort-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .sort-spliter {
        width: 1px;
        height: 12px;
        background: rgba(235, 235, 235, 1);
        margin: 0 10px;
        }
        .btn-sort {
        font-size: 14px;
        line-height: 1;
        color: #ccc;
        &:hover {
            color: #20a0ff;
        }
    }
}
.el-button-left {
    margin-left: 40px;
}
.el-button-right {
    margin-right: 10px;
}
.__flex {
    display: flex;
    align-items: center;
    .__flex_status {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 5px;
    }
}
</style>
<style lang="less">
    .companyPostList{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
    }
</style>